<template>  
  <div class="image-composer">  
    <div class="upload-section">  
      <input   
        type="file"   
        accept="image/*"   
        @change="handleImageUpload"   
        ref="fileInput"  
        class="hidden"  
      />  
      <button @click="triggerFileInput" class="upload-btn">  
        选择图片  
      </button>  
      <div v-if="previewUrl" class="preview-section">  
        <img :src="previewUrl" alt="预览" class="preview-image"/>  
      </div>  
    </div>  
    <button   
      @click="generateComposite"   
      :disabled="!previewUrl"   
      class="generate-btn"  
    >  
      生成合成图片  
    </button>  
    <canvas ref="canvas"></canvas>  
    <div v-if="resultUrl" class="result-section">  
      <img :src="resultUrl" alt="结果" class="result-image"/>  
      <a :href="resultUrl" download="composite.png" class="download-btn">  
        下载图片  
      </a>  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  name: 'ImageComposer',  
  data() {  
    return {  
      previewUrl: null,  
      resultUrl: null,  
      uploadedImage: null,  
      laptopTemplate: null  
    }  
  },  
  mounted() {  
    this.laptopTemplate = new Image();  
    this.laptopTemplate.src = 'http://localhost:8080/images/laptop-template.png'; // 使用提供的模板图片  
    this.laptopTemplate.onload = () => {  
      console.log('笔记本电脑模板加载成功');  
    };  
    this.laptopTemplate.onerror = (error) => {  
      console.error('笔记本电脑模板加载失败:', error);  
    };  
  },  
  methods: {  
    triggerFileInput() {  
      this.$refs.fileInput.click();  
    },  
    handleImageUpload(event) {  
      const file = event.target.files[0];  
      if (file) {  
        console.log('上传的文件:', file);  
        this.uploadedImage = file;  
        this.previewUrl = URL.createObjectURL(file);  
        this.resultUrl = null; // 清除之前的结果  
        console.log('预览URL:', this.previewUrl);  
      }  
    },  
    async generateComposite() {  
      console.log('生成合成图片被调用');  
      if (!this.uploadedImage) return;  

      const canvas = this.$refs.canvas;  
      const ctx = canvas.getContext('2d');  
      console.log('Canvas 上下文获取成功');  
      
      canvas.width = 1200;  
      canvas.height = 800;  

      const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);  
      gradient.addColorStop(0, '#2980b9');  
      gradient.addColorStop(0.5, '#6dd5ed');  
      gradient.addColorStop(1, '#ffffff');  
      
      ctx.fillStyle = gradient;  
      ctx.fillRect(0, 0, canvas.width, canvas.height);  

      const laptopWidth = canvas.width * 0.8;  
      const laptopHeight = laptopWidth * (this.laptopTemplate.height / this.laptopTemplate.width);  
      const laptopX = (canvas.width - laptopWidth) / 2;  
      const laptopY = (canvas.height - laptopHeight) / 2;  

      // 确保模板图像加载成功  
      await new Promise((resolve, reject) => {  
        this.laptopTemplate.onload = () => {  
          ctx.drawImage(this.laptopTemplate, laptopX, laptopY, laptopWidth, laptopHeight);  
          console.log('笔记本电脑模板绘制成功');  
          resolve();  
        };  
        this.laptopTemplate.onerror = (error) => {  
          reject(error);  
        };  
      });  

      try {  
        const uploadedImg = new Image();  
        uploadedImg.src = this.previewUrl;  

        await new Promise((resolve, reject) => {  
          uploadedImg.onload = () => {  
            const screenX = laptopX + (laptopWidth * 0.1);  
            const screenY = laptopY + (laptopHeight * 0.1);  
            const screenWidth = laptopWidth * 0.76;  
            const screenHeight = laptopHeight * 0.56;  

            // 维护上传图像的宽高比
            const imgAspectRatio = uploadedImg.width / uploadedImg.height;
            const screenAspectRatio = screenWidth / screenHeight;

            let newWidth, newHeight;

            if (imgAspectRatio > screenAspectRatio) {
              newWidth = screenWidth;
              newHeight = newWidth / imgAspectRatio;
              ctx.drawImage(uploadedImg, screenX, screenY + (screenHeight - newHeight) / 2, newWidth, newHeight);
            } else {
              newHeight = screenHeight;
              newWidth = newHeight * imgAspectRatio;
              ctx.drawImage(uploadedImg, screenX + (screenWidth - newWidth) / 2, screenY, newWidth, newHeight);
            }

            // 设置透明度
            ctx.globalAlpha = 0.8; // 调整透明度
            ctx.drawImage(uploadedImg, screenX, screenY, newWidth, newHeight);
            ctx.globalAlpha = 1.0; // 重置透明度

            console.log('用户图片绘制成功');  
            resolve();  
          };  
          uploadedImg.onerror = (error) => {  
            reject(error);  
          };  
        });  

        this.resultUrl = canvas.toDataURL('image/png');  
        console.log('合成图片生成成功');  
        console.log('合成结果URL:', this.resultUrl);  
      } catch (error) {  
        console.error('图片处理出错:', error);  
        alert('生成图片时出现错误，请重试');  
      }  
    }  
  }  
}  
</script>  
<style scoped>
.image-composer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.hidden {
  display: none;
}

.upload-btn, .generate-btn, .download-btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.upload-btn:hover, .generate-btn:hover, .download-btn:hover {
  background-color: #2980b9;
}

.generate-btn:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

.preview-section, .result-section {
  margin: 20px 0;
  text-align: center;
}

.preview-image, .result-image {
  max-width: 100%;
  max-height: 500px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.result-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.download-btn {
  text-decoration: none;
}
</style> 